<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        //全选

        function checkAll(){
            //让所有的复选框都选中
            //document.getElementsByName() ; 是根据指定的name属性查询返回多个标签对象的集合
            //这个集合的操作跟数组一样
            //集合中的每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");//[object NodeList]
            //查看选中的状态值和不选中的状态值
            //选中的状态就是true，不选中的状态就是false
            //checked这个属性可读可写
            for(var i = 0 ; i< hobbies.length ; i++){
                hobbies[i].checked = true;
            }
        }

        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName('hobby');
            for(var i = 0 ; i < hobbies.length ; i++){
                hobbies[i].checked = false;
            }
        }

        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName('hobby');
            for(var i = 0 ; i < hobbies.length ; i++){
                    hobbies[i].checked = !hobbies[i].checked;
                // if(hobbies[i].checked){
                //     hobbies[i].checked = false;
                // }else{
                //     hobbies[i].checked = true;
                // }
            }
        }

    </script>

</head>
<body>
<p id="text_show">
    Document对象中的方法介绍(重点)<br/>
    document.getElementsByName(name)<br/>
</p>
<div class="look_source_code" onclick="getPageContent()">查看源码</div>

兴趣爱好：
<input type="checkbox" name="hobby" value="c++" checked="checked"> c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">javascript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">不全选</button>
<button onclick="checkReverse()">反选</button>

</body>


</html>


